<template>
  <div class="container" style="background-color: rgba(0,0,0,0)">
    <div class="svg-wraper">
      <svg :style="{ left: svgLeftPage + 'px' }">
        <path fill="#f3f3f3" d="M0 40  C0 40, 20 38, 50 20  C50 20, 100-15, 150 20  C150 20, 170 34, 200 40  " />
      </svg>
    </div>
    <ul class="nav">
      <li class="item" v-for="(item, index) in items" :key="index" :class="{ active: activeIndex === index }" @click="handleClick(index)">
        <div class="circle" :style="{ backgroundColor: colors[index] }"></div>
        <i class="icon f7-icons tooltip-init" v-if="activeIndex === index" style="margin-top: -15px" :style="{'color':item.color}" :data-tooltip="item.icon">{{item.icon}}</i>
		<i class="icon f7-icons tooltip-init" v-else style="margin-top: -15px"  :data-tooltip="item.icon">{{item.icon}}</i>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance,computed } from 'vue'

const  props = defineProps({
  activeIndex: {
    type: Number,
    default: 0
  },
  svgLeft: {
    type: Number,
    default: -55
  }
})

let colors = ref(['#7bed9f', '#70a1ff', '#5352ed'])
let items  = ref([
  { icon: 'house',url:'/pages/index/index','color':'#5352ed' },
  { icon: 'search',url: '/pages/search/search','color':'#999' },
  { icon: 'cube',url:'/pages/categroy/categroy','color':'#7bed9f' }
])
let svgLeftPage = ref(props.activeIndex * 165 - 55)

let bgColor = computed(()=>{
  return colors.value[props.activeIndex]
})

function handleClick(index){
  props.activeIndex = index
  uni.redirectTo({
    url: items.value[index].url,
  });
}
</script>

<style scoped>


  .container {
    width: 100%;
    margin: auto;
    height: 90px;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: fixed;
    bottom: 0;
    overflow: hidden;
    background-color: #70a1ff;
  }
  
  .container ul {
    padding: 0;
    margin: 0;
    list-style: none;
  }
  
  .container .svg-wraper {
    width: 100%;
    font-size: 0;
    position: relative;
  }
  
  .container .svg-wraper svg {
    position: absolute;
    bottom: 0;
    left: 50px;
    transition: all .3s;
    width: 200px;
    height: 40px;
  }
  
  .container .nav {
    display: flex;
    background-color: #f3f3f3;
    box-sizing: border-box;
    width: 100%;
  }
  
  .container .nav li {
    cursor: pointer;
    width: 400rpx;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  
  .container .nav li span {
    position: relative;
    z-index: 1;
    transition: all .3s;
    color: gray;
    font-size: 1.5em;
  }
  
  .container .nav li .circle {
    position: absolute;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: all .3s;
    background-color: #70a1ff;

    width: 40px;
    height: 40px;
    z-index: 0;
  }
  
  .container .nav li.active .circle {
    top: 35%;
    transform: translate(-50%, -50%) scale(1);
  }
  
  .container .nav li.active span {
    transform: translateY(-8px);
    color: #fff;
  }
</style>
